import React, { useState, useEffect } from 'react';
import {
  View,
  Image,
  StyleSheet,
  Text,
  ScrollView
} from 'react-native';

import BasicsCard from "../components/cards/BasicsCard";
import SlideCard from '../components/cards/SlideCard';
import mockData from '../mock/data.js';

function Shop (props) {
  const { navigation } = props;
  const { data } = mockData["getHomeList"];

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={styles.page}>
        {
          data.length ? data.map(item => {
            if (item.card == "BasicsCard") {
              return (<BasicsCard type={item.type} detail={item.detail} key={item.id} navigation={navigation}/>)
            } else if (item.card == "SlideCard") {
              return (<SlideCard type={item.type} title={item.title} list={item.detail} key={item.id} navigation={navigation}/>)
            } else {
              return null
            }
          }) : null
        }
      </View>
    </ScrollView>

  )
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'column',
    marginVertical: 15,
  }
})

export default Shop;